<template>

 <div>
 	<Hearder title="category管理" listName="分类列表"></Hearder>

    <el-button type="primary" @click="pojo= {} , dialogVisible = true">新建</el-button>
    <!-- 对话框 -->
    <el-button v-if="rank!= 1" type="primary" @click="back">返回上一级</el-button>
<el-dialog :title="pojo.id ? '编辑':'新建'" :visible.sync="dialogVisible"width="35%"> 
  <el-form :inline="false" class="demo-form-inline" label-width="90px">
     <el-form-item label="分類名称">
       <el-input v-model="pojo.name" placeholder="分類名称">{{pojo.name}}</el-input>
     </el-form-item>
     <el-form-item label="是否顯示">
      <el-switch
        v-model="pojo.isShow"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0">
      </el-switch>
     </el-form-item>
     <el-form-item label="是否導航">
      <el-switch
        v-model="pojo.isMenu"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0">
      </el-switch>
     </el-form-item>
     <el-form-item label="排序">
       <el-input v-model="pojo.seq" placeholder="排序">{{pojo.seq}}</el-input>
     </el-form-item>
     <el-form-item label="模板Id">
     <el-select v-model="pojo.templateId" placeholder="请选择">
      <el-option
        v-for="item in templateList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
     </el-select>
     </el-form-item>
     <el-form-item>
     	<el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
     </el-form-item>
    </el-form>
</el-dialog>
<!-- 数据表单      -->
  <el-table :data="tableData" style="width: 100%; height: 500px;">
    <el-table-column label="分类Id" prop="id"></el-table-column>
    <el-table-column label="分类名称" prop="name"></el-table-column>
    <el-table-column label="商品数量" prop="goodsNum"></el-table-column>
    <el-table-column label="級別"> 
      {{rank}}
            </el-table-column>
    <el-table-column label="是否显示">
      <template slot-scope="scope">
        <el-switch
        v-model="scope.row.isShow"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0">
      </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="是否导航">
      <template slot-scope="scope">
        <el-switch
        v-model="scope.row.isMenu"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0">
      </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="排序" prop="seq"></el-table-column>
  
    <el-table-column label="设置">
      <template slot-scope="scope">
        <el-button
          v-if="rank!=3"
          size="mini"
          type="text"
          @click="queryByParentId(scope.row.id)">查看下级</el-button>
      </template>
    </el-table-column>
    <!-- 操作 -->
    <el-table-column
      align="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          @click="fecthById(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="text"
          @click="deleteById(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页条 -->
<div>
  <el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="getBranList"
  @size-change="getBranList"
  :current-page.sync="currentPage"
  >
</el-pagination>
</div>
 </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        search: {
        	parentId: 0,
        },
        dialogVisible: false,
        pojo: {
          templateId: '',
        },
        templateList: [],
        rank: 1,
        total: 0,
        currentPage: 1,
        pageSize: 8,
      }
    },    
    created() {
      this.getBranList();
    
    },
    computed: {

    },
    methods: {
      //获取品牌列表
      async getBranList() {
        const  res =  await this.$http.get(`/api/category/findPage.do?page=${this.currentPage}&size=${this.pageSize}`)
       this.tableData = res.data.rows;
       this.total =  res.data.total;          
       
          
      },
       // 新建 与编辑
      async save() {
      	// 通过判断id是否为空来发起不同的请求
          const res = await this.$http.post(`/api/brand/${this.pojo.id == null ? 'add' : 'update'}.do`,this.pojo);

          this.dialogVisible = false;
          // 刷新列表
          this.getBranList();
          this.$message({
            type: 'success',
            message: this.id?'修改成功':'保存成功'
          });
      },
      async fecthById(row){
      	  alert(row.id)
          this.dialogVisible = true
          const res = await this.$http.get(`/api/brand/findById.do?id=${row.id}`)
          this.pojo =  res.data;
          console.log(res)
          
          
      },
      async deleteById(row) {
        
         this.$confirm('是否确定要删除'+row.name+'分類?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.get(`/api/brand/delete.do?id=${row.id}`)
          
          if (res.code == 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
            //删除成功 查询获取数据
          this.getBranList()
        }else {
          this.$message({
            type: 'success',
            message: '删除失敗,存在下級數據!'
          });
        }
          
        })
        },

      
      //根据parentId查询下级列表
      async queryByParentId(parentId){
       
       const  res =  await this.$http.post(`/api/category/findPage.do?page=${this.currentPage}&size=${this.pageSize}`,{"parentId":parentId})
        console.log(res)
        
        this.rank = this.rank + 1; 
       this.tableData = res.data.rows;
       this.total =  res.data.total;
      },
      //獲取模板列表
      async getTemplateList() {
        const res = await this.$http.get('/api/template/findAll.do');
        this.templateList = res.data
      },
      back(){
        this.rank = this.rank-1;
        if (this.rank == 2) {
              this.queryByParentId(parentId)
        }else {
          this.getBranList()
        }
      }
 
    },
}
</script>
<style scoped>
  .el-pagination {
    width: 300px;
    margin: 0 auto;
  }

</style>